<template>
	<view class="message-center">
		<!-- 顶部标题栏 -->
		<view class="header">
			<!-- 返回按钮 -->
			<u-icon name="arrow-left" size="40" color="#fff" @click="goBack"></u-icon>
			<text class="header-title">消息中心</text>
		</view>
		<!-- 消息列表 -->
		<scroll-view scroll-y class="message-list">
			<u-card v-for="(item, index) in messageList" :key="item.id" class="message-item" :title="item.content">
				<view class="message-content">
					<!-- 显示序号 -->
					<text class="message-index">{{ index + 1 }}</text>
					<view class="message-text-wrapper">
						<!-- 显示消息内容 -->
						<text class="message-text">{{ item.content }}</text>
					</view>
					<!-- 显示消息时间 -->
					<text class="message-time">{{ item.time }}</text>
				</view>
				<!-- 如果消息未读，显示红点 -->
				<view v-if="!item.read" class="unread-dot"></view>
			</u-card>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getTMessage
	} from '@/api/user.js';

	export default {
		data() {
			return {
				messageList: [] // 消息列表
			};
		},
		methods: {
			// 获取消息
			fetchMessages() {
				const userId = this.$cookies.get("id"); // 获取用户ID
				if (!userId) {
					uni.showToast({
						icon: 'none',
						title: '用户未登录'
					});
					return;
				}
				getTMessage({
						userid: userId
					})
					.then(res => {
						if (res.message === "success") {
							// 更新消息列表
							this.messageList = res.data.map(item => ({
								id: item.id,
								content: item.messageContent, // 显示消息内容
								time: this.formatDate(item.createTime), // 格式化时间
								read: item.state === '1' // 根据状态判断是否已读
							}));
						} else {
							uni.showToast({
								icon: 'none',
								title: '获取消息失败'
							});
						}
					})
					.catch(error => {
						console.error("请求消息失败:", error);
						uni.showToast({
							icon: 'none',
							title: '网络错误，请稍后再试'
						});
					});
			},
			// 格式化时间
			formatDate(dateString) {
				const date = new Date(dateString);
				return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
			},
			// 返回主页
			goBack() {
				uni.switchTab({
					url: '/pages/profile/profile'
				})
			}
		},
		onLoad() {
			this.fetchMessages();
		}
	};
</script>

<style>
	/* 顶部标题栏 */
	.header {
		background-color: #2ac2d2;
		padding: 20rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		color: #fff;
		box-shadow: 0px 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.header-title {
		font-size: 36rpx;
		font-weight: 600;
		letter-spacing: 1px;
		margin-left: 10rpx;
		/* 增加左边距 */
	}

	.refresh-button {
		font-size: 30rpx;
		background-color: #fff;
		color: #2ac2d2;
		border-radius: 8rpx;
		padding: 10rpx 20rpx;
	}

	/* 消息列表 */
	.message-center {
		display: flex;
		flex-direction: column;
		background-color: #f5f7fa;
		height: 100%;
	}

	.message-list {
		flex: 1;
		padding: 30rpx 20rpx;
	}

	/* 消息卡片 */
	.message-item {
		margin-bottom: 20rpx;
		position: relative;
		border-radius: 16rpx;
		box-shadow: 0px 4rpx 10rpx rgba(0, 0, 0, 0.1);
		overflow: hidden;
	}

	.message-item .u-card {
		background-color: #fff;
		border: none;
	}

	.message-content {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.message-index {
		font-size: 32rpx;
		color: #2ac2d2;
		font-weight: bold;
		margin-right: 20rpx;
	}

	.message-text-wrapper {
		flex: 1;
		margin-right: 20rpx;
	}

	.message-text {
		font-size: 35rpx;
		color: #333;
		line-height: 1.5;
		word-wrap: break-word;
	}

	.message-time {
		font-size: 28rpx;
		color: #999;
		margin-top: 5rpx;
	}

	.unread-dot {
		width: 14rpx;
		height: 14rpx;
		background-color: #ff5c5c;
		border-radius: 50%;
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		box-shadow: 0px 2rpx 4rpx rgba(0, 0, 0, 0.3);
	}
</style>